<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>过滤器</title>
    <script src="../js/vue.js"></script>
    <script src="../js/dayjs.min.js"></script>
</head>
<body>
    <div id="root">
        <h2>显示格式化后的属性</h2>
        <!-- computed实现 -->
        <h3>现在是：{{fmtTime}}</h3>
        <!-- methods实现 -->
        <h3>现在是：{{fmtTime}}</h3>
        <!-- (1)过滤器实现：这种方式可以更好地体现过滤过程，因为 它指明了被过滤对象和过滤器 -->
        <h3>现在是：{{time | timeMaster}}</h3>
        <!-- (2)过滤器实现(传参)
                参数是指格式化的具体形式，好处是可以直接在过滤器这里指定形式，更方便
             (3)过滤之后可以继续过滤
        -->
        <h3>现在是：{{time | timeMaster('YYYY-MM-DD') | mySlice}}</h3>
        <!-- (6)还可以用在 属性绑定(其他的绑定不行) 上，但是用的比较少
                因为一般都是对标签体的内容进行格式化的过滤
        -->
        <h3 :x="msg | mySlice"></h3>
    </div>

    <script type='text/javascript'>
        
        /**
         * (5)定义全局过滤器，在不同的实例都可以使用
         *    Vue.说明是全局的函数，第一个参数为 函数名，第二个为匿名函数
         * */ 
        Vue.filter('mySlice',()=>{
              return val.slice(0,4)
        })

        new Vue({
           el:'#root',
           data:{
              time:22222222222,
              msg:'你好，周杰'
           },
           computed: {
              fmtTime(){
                 return dayjs(this.time).format('YYYY年MM月DD日 HH-mm-ss')
              }
           },
           methods: {
              getfmtTime(){
                 return dayjs(this.time).format('YYYY年MM月DD日 HH-mm-ss')
              }
           },
           filters: {
              // (4) 通常str要写默认形式，因为调用时有重载形式   
              timeMaster(val,str = 'YYYY年MM月DD日 HH-mm-ss'){
                 return dayjs(val).format(str)
              },
              mySlice(val){
                 return val.slice(0,4)
              }
           }
        })
    </script>
</body>
</html>